<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <style>
        .top_box {
            width: 517px;
            height: 367px;
            background-image: url("right_bg_inner.png");
            background-position: 50% 80px;
            background-repeat: no-repeat;
            background-color: rgba(17, 100, 244, 0.1);
            padding-top: 13px;
            position: relative;
        }

        .top {
            width: 174px;
            height: 69px;
            background-image: url("big_title_bg.png");
            background-repeat: no-repeat;
            background-size: 100%;
            margin: 0 auto;
            font-size: 14px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            padding-top: 4px;
        }

        .top_item {
            width: auto;
            height: 29px;
            line-height: 29px;
            /*font-size: 14px;*/
            font-size: 12px;
            color: #fff;
            text-align: center;
            padding: 0 10px;
            background-image: url("normal_bg.png");
            background-size: 100% 100%;
            position: absolute;
            cursor: pointer;
        }

        .top_item.on:before {
            content: url("left_inner.png");
            position: absolute;
            left: 0;
            top: 0;
        }

        .top_item.on:after {
            content: url("right_inner.png");
            position: absolute;
            right: 0;
            top: 0;
        }

        .top_item.on {
            background-image: url("light_bg.png");
        }

        .table_box {
            width: 517px;
            margin-top: 12px;
            /*height: ;*/
        }

        .table_box .table_head {
            height: 34px;
            font-weight: 700;
            background: #125cb7;
        }

        .table_box .table_head div {
            float: left;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            width: 20%;
            line-height: 34px;
        }

        .table_box .table_head div:nth-of-type(2n-1) {
            width: 30%;
        }

        .table_box .list_item:nth-of-type(2n-1) {
            background: rgba(17, 100, 244, 0.2);
            /*background: gray;*/
        }

        .table_box .list_item:nth-of-type(2n) div {
            color: #f7f40a;
        }

        .table_box .list_item div {
            width: 20%;
            float: left;
            text-align: center;
            font-size: 16px;
            color: #fff;
            line-height: 32px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table_box .list_item div:nth-of-type(2n-1) {
            width: 30%;
        text-align: left;
        }

        #tableList {
            height: 96px;
            /*overflow: hidden;*/
        }

        .table_box .list_item {
            height: 32px!important;
            width: 100%;
        }
    </style>

</head>
<body class="">

<div class="top_box">
    <div class="top">
        集团
        <br>
        在编人数：<span class="num1">29208</span>
        <br>
        实际人数：<span class="num2">29208</span>
    </div>
    <div class="top_item top_1" style="left: 105px;top: 101px" data-type="42001" data-name="党委会"></div>
    <div class="top_item top_2" style="left: 218px;top: 101px">股东大会</div>
    <div class="top_item top_3" style="left: 219px;top: 147px" data-type="42001" data-name="董事会"></div>
    <div class="top_item top_4" style="left: 319px;top: 147px" data-type="42001" data-name="监事会"></div>
    <div class="top_item top_5" style="left: 219px;top: 182px" data-type="42001" data-name="经理层"></div>

    <div class="top_item editor on top_6" style="left: 208px;top: 226px;" data-type="42002" data-name="集团总部"></div>

    <div class="top_item editor top_7" style="left: 65px;top: 276px;" data-type="42008" data-name="境内"></div>
    <div class="top_item top_8" style="left: 219px;top: 276px;">本部</div>
    <div class="top_item editor top_9" style="left: 358px;top: 276px;" data-type="42009" data-name="海外"></div>

    <div class="top_item editor top_10" style="left: 9px;top: 327px;" data-type="42003" data-name="生产单元"></div>
    <div class="top_item editor top_11" style="left: 105px;top: 327px;" data-type="42004" data-name="保障单元"></div>
    <div class="top_item editor top_12" style="left: 201px;top: 327px;" data-type="42005" data-name="服务单元"></div>
    <div class="top_item editor top_13" style="left: 296px;top: 327px;" data-type="42006" data-name="全资子公司"></div>
    <div class="top_item editor top_14" style="left: 408px;top: 327px;" data-type="42007" data-name="控股子公司"></div>

</div>
<div class="table_box">
    <div class="table_head">
        <div class="type_name">集团总部</div>
        <div>在岗人数</div>
        <div class="type_name">集团总部</div>
        <div>在岗人数</div>
    </div>
    <div class="swiper-container">
<!--        <div id="tableList" class=""></div>-->
    </div>

</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/swiper.min.js"></script>
<script type="text/javascript" src="../../js/jquery.SuperSlide.2.1.3.js"></script>
<script>
	$(function () {
		setInterval(() => {
			let ran = Math.ceil(Math.random() * 8);
			$('.editor').eq(ran).trigger('click')
		}, 10000)


		$('.editor').on('click', function () {
			$(this).addClass('on').siblings('.editor').removeClass('on');
			let type = $(this).data('type');
			let name = $(this).data('name');
			$('.type_name').html(name)
			loadData(type)
		})


		loadData();

		function loadData(type = '') {
			if (type) {//下级数据
				getJson('jczl_zzjg_list.json', {
					rlzyType: type
				}, function (res) {
					if (res.code == 200) {
						let arr = res.data;
						loadList(arr);
					}
				})
			} else {
				getJson('jczl_zzjg_count.json', {}, function (res) {
					if (res.code == 200) {
						if (res.data.length) {
							// $('.num1').html(res.data[0].haveUserNum || 0);
							// $('.num2').html(res.data[0].actualUserNum || 0)
						}
					}
				})

				getJson('jczl_zzjg_list_all.json', {}, function (res) {
					if (res.code == 200) {
						let arr = res.data;
						loadBase(arr);
						loadData('42002')
					}
				})
			}
		}

		let swipers;

		/**
		 * 加载列表数据
		 */
		function loadList(arr) {
			if (swipers) {
				swipers.destroy();
				swipers = '';
			}
			$('#tableList').html('');
			let num = Math.ceil(arr.length / 2);
      let str = `<div id="tableList" class="">`;
			for (let i = 0; i < arr.length; i += 2) {
				let rows = arr.slice(i, i + 2);

				if (num < 3) {
					str += `<div class="list_item fix">`;
					// $('#tableList').removeClass('swiper-wrapper');
				} else {
					str += `<div class="list_item fix ">`;
					// $('#tableList').addClass('swiper-wrapper');
				}
				for (let j = 0; j < rows.length; j++) {
					str += `<div title="${rows[j].worldRanking}">${rows[j].worldRanking}</div><div>${rows[j].userNum}</div>`
				}
				str += `</div>`;

			}
      str += `</div>`;
      $('.swiper-container').html(str);

      if (num > 3) {
        // $(".swiper-container").slide({mainCell:"#tableList .list_item",autoPlay:true});

        $(".table_box").slide({
          mainCell: "#tableList",
          effect: "topLoop",
          autoPlay: true,
          vis: 3,
          scroll: 1,
          delayTime: 500,
        });

				// swipers = new Swiper('.swiper-container', {
				// 	direction: 'vertical',
				// 	// slidesPerView: 1,
				// 	autoplay: {
				// 		delay: 1000,//1秒切换一次
				// 	},
				// 	loop: true
				// })
			}
		}


		/**
		 * 加载总数据
		 */
		function loadBase(arr) {
			let dom = $('.top_item[data-type][data-name]');
			for (let i = 0; i < dom.length; i++) {
				let type = dom.eq(i).data('type');
				let name = dom.eq(i).data('name');

				let idx = arr.filter(item => {
					return item.rlzyType == type
				})
        if (idx.length) {
					dom.eq(i).html(`${name} ${idx.length}`);
				} else {
					dom.eq(i).html(`${name}`);
				}
			}
		}

	})
</script>
</html>
